<template>
	<view class="detailPage">
		<view class="container">
			<view class="section_1">
				<DetailInfo></DetailInfo>
			</view>
			<view class="section_2">
				<view class="title">房源信息</view>
				<view class="row">
					<view class="column">
						<view class="label">最短租期：</view>
						<view class="content">最短租期</view>
					</view>
					<view class="column">
						<view class="label">押金规则：</view>
						<view class="content">押金规则</view>
					</view>
				</view>
				<view class="row">
					<view class="column">
						<view class="label">入住时间：</view>
						<view class="content">入住时间</view>
					</view>
					<view class="column">
						<view class="label">房源用途：</view>
						<view class="content">房源用途</view>
					</view>
				</view>
				<view class="row">
					<view class="column">
						<view class="label">房型：</view>
						<view class="content">房型</view>
					</view>
					<view class="column">
						<view class="label">水费标准：</view>
						<view class="content">123元/㎡</view>
					</view>
				</view>
				<view class="row">
					<view class="column">
						<view class="label">电费(一档)：</view>
						<view class="content">10元/度</view>
					</view>
					<view class="column">
						<view class="label">电费(二挡)：</view>
						<view class="content">20元/度</view>
					</view>
				</view>
				<view class="row">
					<view class="column">
						<view class="label">电费(三档)：</view>
						<view class="content">30元/度</view>
					</view>
					<view class="column">
						<view class="label">物管费标准：</view>
						<view class="content">40元/㎡/月</view>
					</view>
				</view>
			</view>
			<view class="section_3">
				<view class="title">房源介绍</view>
				<!-- <Empty wx:if="{{detailData.detail_info==null}}" paddingTop="{{0}}" width="{{360}}" position="relative"
					paddingBottom="{{28}}"></Empty> -->
				<view class="content">
					<!-- <rich-text nodes="{{ detailData.detail_info }}"></rich-text> -->
					<!-- <template is="wxParse" data="{{wxParseData:houseDetail.nodes}}" /> -->
				</view>
			</view>
			<view class="section_4">
				<view class="title">配套设施</view>
				<!-- <Empty wx:if="{{detailData.support_meas_image==null}}" paddingTop="{{0}}" width="{{360}}"
					position="relative" paddingBottom="{{28}}"></Empty> -->
				<view class="list">
					<view class="list-item">
						<image class="img_1"
							src="https://manage.yuansaas.com/formAtt/4196501432849143346796a00c34f649_1630026315922.jpg"
							mode="aspectFill"></image>
						<view class="text">社区医院</view>
					</view>
					<view class="list-item">
						<image class="img_1"
							src="https://manage.yuansaas.com/formAtt/41961236720251537df0e20fe5049ba8_1630026278146.jpg"
							mode="aspectFill"></image>
						<view class="text">园区饭堂</view>
					</view>
					<view class="list-item">
						<image class="img_1"
							src="https://manage.yuansaas.com/formAtt/4195704359078237c7ffc826cef4fe7a_1630026236215.jpg"
							mode="aspectFill"></image>
						<view class="text">人才公寓</view>
					</view>
					<!-- <view class="list-item">
	           <image class="img_1" src="/images/icon_detail_02.png" mode="aspectFill"></image>
	           <view class="text">消防设施</view>
	         </view>
	         <view class="list-item">
	           <image class="img_1" src="/images/icon_detail_03.png" mode="aspectFill"></image>
	           <view class="text">照明设备</view>
	         </view> -->
				</view>
			</view>
			<view class="section_5">
				<view class="title">历史业态</view>
				<!-- <Empty wx:if="{{detailData.houseHistory.length===0}}" paddingTop="{{0}}" width="{{360}}"
					position="relative" paddingBottom="{{28}}"></Empty> -->
				<view class="list">
					<view class="list-item">
						<image class="check" src="/static/icon_check_01.png" mode="aspectFill"></image>
						<view class="content">
							<view class="text_1">园区名字</view>
							<view class="text_2">所在行业：互联网</view>
							<view class="text_3">2022-10-01</view>
						</view>
					</view>
					<view class="list-item">
						<image class="check" src="/static/icon_check_01.png" mode="aspectFill"></image>
						<view class="content">
							<view class="text_1">园区名字</view>
							<view class="text_2">所在行业：服务业</view>
							<view class="text_3">2022-10-01</view>
						</view>
					</view>
				</view>
			</view>
			<view class="section_6">
				<view class="title">位置及周边</view>
				<view class="content">
					<Map style="width:100%"></Map>
					<!-- <Map style="width:100%" longitude="{{detailData.longitude}}" latitude="{{detailData.latitude}}"
						parkInfo="{{detailData}}" markers="{{ markers }}" tempMarkers="{{ markers }}"></Map> -->
				</view>
			</view>
			<view class="section_7">
				<view class="title">园区简介</view>
				<!-- <Empty wx:if="{{!detailData.intro}}" paddingTop="{{0}}" width="{{360}}" position="relative"
					paddingBottom="{{28}}"></Empty> -->
				<view class="content">
					瀚天科技城位于南海区桂城街道，是广东都市型产业基地的龙头项目，于2006年启动，由公有资产、集体经济和社会资金以市场化方式合作开发，对北约、平西等村的旧厂房进行集约提升，定位都市型产业，重点发展电子信息、环境服务业、智造科技、文化创意、现代服务业等主导产业。先后被评为南海数字创新基地、佛山市三旧改造先进示范点、广东省高技术产业重点培育区、国家环境服务业华南集聚区、国家级科技企业孵化器、广东省大数据产业园、南海区安全生产技术服务集聚区、广东省非公经济组织先进党组织、佛山市党员教育基地、佛山市“两新”组织党建工作示范点、南海区“两新”组织党建工作示范点等。
				</view>
			</view>
			<view class="section_8">
				<view class="title">房源推荐</view>
				<view class="list">
					<view class="list-item">
						<HouseItem></HouseItem>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="content">
				<view class="like-btn">
					<image class="like-icon" src="/static/icon_like_01.png" mode="aspectFill">
					</image>
				</view>
				<!-- <view class="like-btn" wx:else>
	           <image class="like-icon" src="/images/icon_like_03.png" mode="aspectFill"></image>
	     </view> -->
				<view class="book-btn">预约看房</view>
			</view>
		</view>
		<!-- <BookingDialog show="{{showDialog}}" houseData="{{ detailData }}"></BookingDialog> -->
	</view>

</template>

<script>
	import HouseItem from '@/components/HouseItem.vue'
	import DetailInfo from '@/components/DetailInfo.vue'
	import Map from '@/components/Map.vue'
	export default {
		components: {
			HouseItem,
			DetailInfo,
			Map
		},
		data() {
			return {
				
			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	.detailPage {
		width: 100%;
		background-color: #F7F7F8;
	}

	.detailPage .container {
		width: 100%;
		padding-bottom: 100rpx;
	}

	.detailPage .container .section_1 {
		width: 100%;
		background-color: #fff;
		padding-bottom: 40rpx;
		margin-bottom: 20rpx;
	}

	.detailPage .container .section_2,
	.detailPage .container .section_3,
	.detailPage .container .section_4,
	.detailPage .container .section_5,
	.detailPage .container .section_6,
	.detailPage .container .section_7 {
		width: 100%;
		padding: 32rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.detailPage .container .section_8 {
		width: 100%;
		padding: 32rpx;
		margin-bottom: 20rpx;
	}

	.detailPage .container .section_2 .title,
	.detailPage .container .section_3 .title,
	.detailPage .container .section_4 .title,
	.detailPage .container .section_5 .title,
	.detailPage .container .section_6 .title,
	.detailPage .container .section_7 .title,
	.detailPage .container .section_8 .title {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333444;
		margin-bottom: 30rpx;
	}

	.detailPage .container .section_3 .content {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #888999;
		line-height: 36rpx;
	}

	.detailPage .container .section_2 .row {
		width: 100%;
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.detailPage .container .section_2 .row .column {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.detailPage .container .section_2 .row .column .label {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #888999;
		white-space: nowrap;
	}

	.detailPage .container .section_2 .row .column .content {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333444;
	}

	.detailPage .container .section_4 .list {
		display: flex;
		align-items: center;
		/* justify-content: center; */
		flex-wrap: wrap;
	}

	.detailPage .container .section_4 .list .list-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-bottom: 32rpx;
	}

	.detailPage .container .section_4 .list .list-item:not(:last-child) {
		margin-right: 48rpx;
	}

	.detailPage .container .section_4 .list .list-item .img_1 {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 24rpx;
	}

	.detailPage .container .section_4 .list .list-item .text {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333444;
	}

	.detailPage .container .section_5 .list {
		width: 100%;
	}

	.detailPage .container .section_5 .list .list-item {
		position: relative;
		width: 100%;
		border-left: 2rpx solid #eeeeee;
		margin-bottom: 10rpx;
	}

	.detailPage .container .section_5 .list .list-item .check {
		position: absolute;
		top: 0;
		left: 0;
		transform: translate(-50%, 0);
		width: 28rpx;
		height: 28rpx;
		background-color: #fff;
		padding-bottom: 10rpx;
	}

	.detailPage .container .section_5 .list .list-item .content {
		margin-left: 38rpx;
		padding-bottom: 60rpx;
	}

	.detailPage .container .section_5 .list .list-item .content .text_1 {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333444;
		margin-bottom: 20rpx;
	}

	.detailPage .container .section_5 .list .list-item .content .text_2 {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333444;
		opacity: 1;
		margin-bottom: 20rpx;

	}

	.detailPage .container .section_5 .list .list-item .content .text_3 {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #B8BBC1;
		margin-bottom: 10rpx;
	}

	.detailPage .container .section_6 .content {
		width: 100%;
		height: 564rpx;
		position: relative;
		background: #F7F7F7;
		opacity: 1;
	}

	.detailPage .container .section_7 .content {
		/* max-width: 630rpx; */
		width: 100%;
		padding: 0 28rpx;
		/* height: 216rpx; */
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 36rpx;
		color: #888999;
	}

	.detailPage .container .section_8 .list {
		width: 100%;
	}

	.detailPage .container .section_8 .list .list-item {
		padding: 28rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 16rpx;

	}

	.detailPage .footer {
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
	}

	.detailPage .footer .content {
		width: 100%;
		padding-bottom: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.detailPage .footer .content .like-btn {
		width: 100rpx;
		height: 100rpx;
		background: #FFFFFF;
		box-shadow: 0 6rpx 12rpx rgba(51, 52, 68, 0.1);
		border-radius: 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 16rpx;
	}

	.detailPage .footer .content .like-btn .like-icon {
		width: 60rpx;
		height: 60rpx;
	}

	.detailPage .footer .content .book-btn {
		width: 570rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #FF455A 0%, #EB1364 100%);
		box-shadow: 0 6rpx 12rpx rgba(255, 69, 90, 0.3);
		border-radius: 16rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 100rpx;
		text-align: center;
		color: #FFFFFF;
		opacity: 1;
	}

	.detailPage .van-dialog {
		width: 100%;
		height: 662rpx;
		background: #FFFFFF;
		border: 2rpx solid #707070;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding: 60rpx 0;
	}

	.detailPage .van-dialog .title {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333444;
		opacity: 1;
		margin-bottom: 40rpx;
	}

	.detailPage .van-dialog .form {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* justify-content: center; */
	}

	.detailPage .van-dialog .form .form-item {
		width: 490rpx;
		height: 88rpx;
		background: #F7F7F8;
		border-radius: 10rpx;
		padding: 0 32rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.detailPage .van-dialog .form .form-item .input {
		flex: 1;
	}

	.detailPage .van-dialog .btn-group {
		display: flex;
	}

	.detailPage .van-dialog .btn-group .cancel {
		width: 232rpx;
		height: 88rpx;
		background: rgba(36, 137, 255, 0.1);
		border-radius: 16rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-align: center;
		line-height: 88rpx;
		color: #2489FF;
		margin-right: 26rpx;
	}

	.detailPage .van-dialog .btn-group .confirm {
		width: 232rpx;
		height: 88rpx;
		background: #2489FF;
		box-shadow: 0 6rpx 12rpx rgba(36, 137, 255, 0.3);
		border-radius: 16rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 88rpx;
		text-align: center;
		color: #FFFFFF;
	}

	.placeholder-class {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #B8BBC1;
	}
</style>
